import React from 'react';
import "./index.less"

import {getData} from "../../../../api"

import { Search, Loading,Toast  } from 'react-vant';
export default function AddFriendSearchPage (props) {
    const [value, setValue] = React.useState('');
    // 获取搜索框节点
    const search = React.useRef()
    // 个人信息
    // const [data] =React.useState([
    //     { 
    //         "info_id":"2693bf24-8ca7-47ee-b758-09babdf3d282",
    //         "account":"yumengzhe12345",
    //         "pass":"abc1234",
    //         "name":"余孟哲",
    //         "headPortrait":"https://img2.baidu.com/it/u=495851665,528611998&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=500", 
    //         "site":"河北",
    //         "QRCode":"二维码",
    //         "phoneNum":"17531053916",
    //         "friendCircle":["朋友圈"],
    //         "sex":"男",
    //         "signature":"个性签名",
    //         "collect":[
    //             {
    //                 "img":"链接",
    //                 "name":"从谁哪里收藏的",
    //                 "time":"收藏时间",
    //                 "type":"收藏类型"
    //             }
    //         ]
    //     },
    //     { 
    //         "info_id":"9e39a9c3-099b-4786-ac59-9c5ced5fccca",
    //         "account":"hello12345",
    //         "pass":"abc1234",
    //         "name":"小古",
    //         "headPortrait":"https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", 
    //         "site":"北京",
    //         "QRCode":"二维码",
    //         "phoneNum":"13373125714",
    //         "friendCircle":["朋友圈"],
    //         "sex":"男",
    //         "signature":"个性签名",
    //         "collect":[
    //             {
    //                 "img":"链接",
    //                 "name":"从谁哪里收藏的",
    //                 "time":"收藏时间",
    //                 "type":"收藏类型"
    //             }
    //         ]
    //     },
    //     { 
    //         "info_id":"a1dsc806-0awd-48dt-895a-1cd06dbdshu1",
    //         "account":"xiaobai123",
    //         "pass":"abc1234",
    //         "name":"小白",
    //         "headPortrait":"https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", 
    //         "site":"邯郸",
    //         "QRCode":"二维码",
    //         "phoneNum":"13377340114",
    //         "friendCircle":["朋友圈"],
    //         "sex":"男",
    //         "signature":"个性签名",
    //         "collect":[
    //             {
    //                 "img":"链接",
    //                 "name":"从谁哪里收藏的",
    //                 "time":"收藏时间",
    //                 "type":"收藏类型"
    //             }
    //         ]
    //     }
    // ])
    // 好友信息
    
    const [data,setData] = React.useState([])
    const [friendData,setFriendData] = React.useState([])
    React.useEffect(async () => {
        // input节点自动获取焦点
        search.current.focus()

        let newData = await getData()
        setData(newData.infos)
        setFriendData(newData.friendData)

        // localStorage.setItem("token",JSON.stringify({ 
        //     "info_id":"2693bf24-8ca7-47ee-b758-09babdf3d282",
        //     "account":"yumengzhe12345",
        //     "pass":"abc1234",
        //     "name":"余孟哲",
        //     "headPortrait":"https://img2.baidu.com/it/u=495851665,528611998&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=500", 
        //     "site":"河北",
        //     "QRCode":"二维码",
        //     "phoneNum":"17531053916",
        //     "friendCircle":["朋友圈"],
        //     "sex":"男",
        //     "signature":"个性签名",
        //     "collect":[
        //         {
        //             "img":"链接",
        //             "name":"从谁哪里收藏的",
        //             "time":"收藏时间",
        //             "type":"收藏类型"
        //         }
        //     ]
        // }))
    },[])

    // 搜索结果
    
    const [showSearchText,setShowSearchText] = React.useState(false)
    // 该用户不存在
    const [showSearchresult,setShowSearchresult] = React.useState(false)
    // 搜索事件
    const onSearch = (val) => {
        
    };
    // 取消事件
    const onCancel = () => {
        props.history.push({
            pathname:props.location.state.path,
            state:{
                path:props.location.state.oldPath,
                oldPath:props.location.state.old2Path,
                old2Path:props.location.state.old3Path
            }
        })
    }
    const [searchData,setsearchData] = React.useState()
    // value改变事件
    const onChange = (val) => {
        setValue(val);

        if(!val){
            setTimeout(() => {
                setShowSearchText(false)
                setShowSearchresult(false)
            },200)
            return
        }

        setTimeout(() => {
            setShowSearchText(true)
            setShowSearchresult(false)
            setsearchData(data.find(item => {
                return item.phoneNum===val || item.account===val
            }))
        },1000)
    }

    const clickSearch = () => {
        // 提示弹出层
        Toast.loading({
            message: '正在查找联系人...',
            forbidClick: true,
            duration:1000,
            onClose:() => {
                if(searchData === undefined){
                    setShowSearchresult(true)
                    setShowSearchText(false)
                }else{
                    props.history.push({
                        pathname:"/main/friendDetail",
                        state:{
                            msg:searchData,
                            path:props.location.pathname,
                            oldPath: props.location.state.path,
                            old2Path:props.location.state.oldPath,
                            old3Path:props.location.state.old2Path,
                        }
                    })
                }
            }
        });
    }
    
    return (
        <div className='AddFriendSearchPage'>
            <Search
                ref={search}
                value={value}
                onChange={onChange}
                onSearch={onSearch}
                onCancel={onCancel}
                showAction={true}
                background="#ededed"
                placeholder="请输入搜索关键词"
            />
            <main>
                {
                    showSearchText?<div className='searchResult' onClick={clickSearch}>
                        <p className='addIcon'>
                            <svg className='icon svg' aria-hidden="true">
                                <use xlinkHref='#icon-tianjiapengyou1'></use>
                            </svg>
                        </p>
                        <p>搜索:<span>{value}</span></p>
                    </div>:null
                }
                {
                    showSearchresult?<div className='hint'>
                        <p>该用户不存在</p>
                    </div>:null
                }
            </main>
        </div>
    )
}


